{% from "macros/forms.html" import form_input, form_select, form_textarea, form_switch %}
{% set product_type_id = product_type.id | default(0, true) %}

<script type="text/javascript">
if (typeof htmx !== 'undefined' && htmx.onLoad) {
  htmx.onLoad(function (elt) {
    initChoices('report_types-select', 'report types');
  });
} else {
  initChoices('report_types-select', 'report types');
}
</script>

<div class="bg-base-100 p-4">
  <h1 class="text-3xl font-bold mb-5 w-3/4 ml-[10%]">{{ submit_text }}</h1>
  <p class="text-base-content/60 text-[0.7rem] mb-5 w-1/2 ml-[10%]">ID: {{ product_type.id }}</p>
  <form id="product_type-form"
        class="w-3/4 ml-[10%]"
        {{ form_action }}
        hx-swap="innerHTML"
        hx-target="#form-container"
        hx-target-error="#form-container">
    {% include "partials/admin_form_error.html" %}
    {{ form_input('Title', 'title', product_type.title, form_error.title, width="w-3/4") }}
    {{ form_input('Description', 'description', product_type.description, form_error.description, required=false, width="w-3/4") }}

    <div class="w-3/4 mb-5">
      <select name="report_types[]" multiple required type="number" id="report_types-select">
        {% for report_type in report_types %}
          <option value="{{ report_type.id }}" {% if report_type.id in product_type.report_types %}selected{% endif %}>{{ report_type.title }}</option>
        {% endfor %}
      </select>
    </div>

    <label class="select w-3/4 mb-5">
      <span class="label">Presenter Type</span>
      <select id="product_type"
              name="type"
              required
              class="validator select w-full {% if product_type.type %}pointer-events-none opacity-60{% endif %}"
              hx-get="{{ url_for('admin.product_type_parameters', product_type_id=product_type_id) }}"
              hx-trigger="change"
              hx-include="#product_type"
              hx-target="#parameters"
              hx-swap="innerHTML">
        {% if not product_type.type %}<option value="" selected disabled>Select a presenter type</option>{% endif %}
        {% for option in presenter_types %}
          <option value="{{ option.id }}" {% if option.id == product_type.type %}selected{% endif %}>{{ option.name }}</option>
        {% endfor -%}
      </select>
    </label>

    <div id="parameters" class="w-3/4">{% include "product_type/product_type_parameters.html" %}</div>

    <input type="submit" class="btn btn-primary w-3/4" value="{{ submit_text }}" />
  </form>
</div>
